<template>
	<div>
		<mj-title type="h2" title="Breadcrumb 面包屑"></mj-title>
		<div class="page-desc">显示网站的层级结构，告知用户当前所在位置，以及在需要向上级导航时使用。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-breadcrumb :data="data" separator="/"></mj-breadcrumb>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;mj-breadcrumb :data="data" separator="/">&lt;/mj-breadcrumb>
					&lt;/template>
					&lt;script>
					  export default {
					    data() {
					      return {
					        data:[
					          {title:'首页',to:'./'},
					          {title:'导航1',to:'./'},
					          {title:'导航2',to:'breadcrumb'},
					          {title:'面包屑'}
					        ]
					      }
					    }
					  }
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Breadcrumb 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>data</td>
					<td>面包屑数据信息</td>
					<td>Array</td>
					<td>[]</td>
				</tr>
				<tr>
					<td>separator</td>
					<td>自定义分隔符</td>
					<td>String</td>
					<td>/</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Breadcrumb Data 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>显示名称</td>
				</tr>
				<tr>
					<td>to</td>
					<td>链接，不传则没有链接</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			data:[
				{title:'首页',to:'./'},
				{title:'导航1',to:'./'},
				{title:'导航2',to:'breadcrumb'},
				{title:'面包屑'}
			]
		}
	},
}
</script>